<template>
    <button :style='styles' :disabled="disabled||codeBtnStatus">{{codeBtnTxt}}</button>
</template>

<script>
  export default {
    props: {
      defaultTxt: {
        type: String,
        default: '发送验证码'
      },
      newtTxt: {
        type: String,
        default: '重新发送'
      },
      times: {
        type: Number,
        default: 60
      },
      styles: {
        type: String,
        default: "padding: 0 .1rem"
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        codeBtnTxt: this.defaultTxt,
        codeBtnStatus: false
      }
    },
    methods: {
      timer (t) {
          this.timOut = 0
          this.codeBtnTxt = t>0 ? t + 's' + this.newtTxt : this.defaultTxt
          this.codeBtnStatus = t>0 ? true : false
          if (t<=0) {
            this.$emit('refresh')
            return
          }
          t--
          setTimeout(() => {
            this.timer(t)
          }, 1000)
      },
      startTimer (t) {
        if(this.disabled||this.codeBtnStatus) return
        this.timer(t)
      }
    }
  }
</script>
